<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MEGA</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/user-card.css" />
<link rel="stylesheet" type="text/css" href="../css/avatars.css" />
<link rel="stylesheet" type="text/css" href="../css/icons.css" />
<link rel="stylesheet" type="text/css" href="../css/buttons.css" />
<link rel="stylesheet" type="text/css" href="../css/dropdowns.css" />
<link rel="stylesheet" type="text/css" href="../css/popups.css" />
<link rel="stylesheet" type="text/css" href="../css/spinners.css" />
<link rel="stylesheet" type="text/css" href="../css/chat-messages.css" />
<link rel="stylesheet" type="text/css" href="../css/chat-textarea.css" />
<link rel="stylesheet" type="text/css" href="../css/chat-typing.css" />
<link rel="stylesheet" type="text/css" href="../css/chat-left-pane.css" />
<link rel="stylesheet" type="text/css" href="../css/chat-feedback.css" />
<link rel="stylesheet" type="text/css" href="../css/chat-common.css" />
<link rel="stylesheet" type="text/css" href="../css/retina-images.css" />
<link rel="stylesheet" type="text/css" href="../css/rtl.css" />
<link rel="stylesheet" type="text/css" href="../css/media-print.css" />
<script type="text/javascript" src="../js/vendor/jquery-2.2.0.js"></script>
<script type="text/javascript" src="../js/vendor/jquery-ui-1.11.4.js"></script>
<script type="text/javascript">

$(document).ready(function ()
{
    $('.loading-info li').removeClass('loading loaded');
    $('.loading-spinner').removeClass('active'); 
    $('.loader-progressbar').removeClass('active'); 
    $('.loader-percents').removeAttr('style');
        
    //All timeouts are just for demo
    setTimeout(function() { 
        $('.loading-spinner').addClass('active'); 
    }, 1000);
    
    // Step 1
    setTimeout(function() {
        $('.loading-info li.loading').addClass('loaded').removeClass('loading');
        $('.loading-info li.step1').addClass('loading');
    }, 3000);
    
    // Step 2
    setTimeout(function() {
        $('.loading-info li.loading').addClass('loaded').removeClass('loading');
        $('.loading-info li.step2').addClass('loading');
        $('.loader-progressbar').addClass('active'); 
        
        var count = 0,
              timer = 0;
        
        // Progressbar demo
        timer = setInterval(function() {
            ++count;
            if (count === 100) {
                clearInterval(timer);
            } else {
                $('.loader-percents').width(count + '%');
            }
        }, 50); 
        
    }, 5000);
    
    // Step 3
    setTimeout(function() {
        $('.loading-info li.loading').addClass('loaded').removeClass('loading');
        $('.loading-info li.step3').addClass('loading');
        $('.loader-progressbar').removeClass('active'); 
    }, 10000);
   

});
</script>
</head>

<body>

<div class="loading-spinner">
    <div class="main-loader"></div>
    <ul class="loading-info">
        <li class="step3">Decrypting</li>
        <li class="step2">Receiving account data</li>
        <li class="step1">Requesting account data</li>
    </ul>
    <div class="loader-progressbar">
        <div class="loader-percents"></div>
    </div>
</div>
  
</div>
</body>
</html>